<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<style type="text/css">
			body {
				background: url(img/bd-bg.png) repeat-x;
			}
			
			.w {
				width: 940px;
				margin: 0 auto;
			}
			
			.header {
				height: 128px;
				padding-top: 37px;
				padding-bottom: 46px;
			}
			
			.logo {
				margin-left: 15px;
			}
			
			.nav {
				float: right;
				margin-top: 22px;
			}
			
			.nav li {
				float: left;
				padding: 0PX 10px 10PX;
				border-left: 1px dotted #D6D6D6;
			}
			
			.nav a {
				font: bold 14px georgia;
				text-decoration: none;
				color: #666;
			}
			
			.nav p {
				color: #B7B7B7;
				/*在chrome浏览器中字体最小支持到12px*/
				font: 11px tahoma;
			}
			
			.nav a:hover {
				color: #016999;
				text-decoration: underline;
			}
			/*横幅广告*/
			
			.banner {
				height: 355px;
				background: url(img/banner-bg.png) no-repeat bottom center;
				position: relative;
			}
			
			.banner_a {
				position: absolute;
				left: 20px;
				top: 315px;
			}
			
			.banner_a a {
				display: block;
				float: left;
				width: 17px;
				height: 17px;
				margin-left: 4px;
			}
			
			.banner_a .active,
			.banner_a a:hover {
				background: url(img/pointer-active.png) no-repeat;
			}
			
			.banner a {
				background: url(img/pointer.png) no-repeat;
			}
			/*内容部分*/
			
			
			
			.content h1 {
				text-align: center;
				font: bold 24px Georgia;
				/*上右下左*/
				padding: 6px 0px 20px 0px;
				background: url(img/line.png) no-repeat bottom center;
				margin-bottom: 38px;
			}
			
			.content_div,
			.contack_div
			 {
				width: 300px;
				float: left;
				
			}
			
			
			.contack_div input[class="text"]{
				border-radius: 3px;
				outline: none;
				border: 1px solid gainsboro;
			}
			.contack_div input[class="tarea"]{
				border: 1px solid gainsboro;	
			}
			
			
			
			
			
			
			
			.div2 {
				margin: 0px 20px;
			}
			
			.cleanfix:after,
			.cleanfix:before {
				content: "";
				display: table;
				clear: both;
			}
			
			/*111111111111111111111*/
			
/*设置div中的标题*/
.content h2{
	color: #11719e;
	font: 21px Georgia;
}

.content .p1{
	color: #8c8c8c;
	font: 12px Helvetica;
}

/*设置图片div*/
.content .imgDiv{
	width: 299px;
	height: 190px;
	background: url(img/img-bg.png) no-repeat;
	/*设置上下外边距*/
	margin: 16px 0px 10px 0px;
	/*设置水平居中*/
	text-align: center;
	/*设置上内边距*/
	padding-top: 12px;
}

/*设置第二个段落*/
.content .p2{
	height: 92px;
	color: #3e3e3e;
	font: 13px Helvetica;
	word-spacing: 2px;
}

/**
 * 设置按钮的样式
 */
.content .lm{
	/*设置块元素*/
	display: block;
	/*设置宽和高*/
	width: 163px;
	height: 40px;
	/*设置背景*/
	background: url(img/btn1.png) no-repeat;
	/*设置下划线*/
	text-decoration: none;
	/*设置文字*/
	color: #016999;
	font: 12px/40px Helvetica ;
	/*设置文字的缩进*/
	text-indent: 1em;
	/*设置下外边距*/
	margin-bottom: 35px;
	}
	.con{
			height: 300px;
			background: url(img/line.png) no-repeat top center;
			
		}
	
	
	
	
	
	
	/*******************************************/

		
		</style>
	</head>

	<body>
		<div id="wrapper">

			<!--创建头部div-->
			<div class="header w">

				<!--创建导航条-->
				<div class="nvl">
					<ul class="nav">
						<li>
							<a href="#">HOME</a>
							<p>Back to home</p>
						</li>
						<li>
							<a href="#">PRODUCTS</a>
							<p>What we have for you</p>
						</li>
						<li>
							<a href="#">SERVICES</a>
							<p>Things we do</p>
						</li>
						<li>
							<a href="#">BLOG</a>
							<p>Follow our updates</p>
						</li>
						<li>
							<a href="#">CONTACT</a>
							<p>Ways to reach us</p>
						</li>
					</ul>
				</div>
				<!--创建logo-->
				<div class="logo">
					<img src="img/logo.png" alt="这是网页的logo" />
				</div>
			</div>
			<!--头部div结束-->

			<!--创建banner横幅广告-->
			<div class="banner w">
				<img src="img/banner/banner01.png" />
				<div class="banner_a">

					<a href="#"></a>
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>

				</div>
			</div>
			<!--banner结束-->

			<div class="content w cleanfix">
				<h1>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit
				</h1>
				
				
				
				<!--内容部分-->
				
					<div class="content_div">
					<h2>Perfect Logic</h2>
					<p class="p1">All you want your website to do.</p>
					<!-- 创建图片的div -->
					<div class="imgDiv">
						<img src="img/pic/pic1.jpg" alt="小男孩" />
					</div>

					<p class="p2">
						Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
					</p>

					<a class="lm" href="#">Learn More</a>
				</div>
				<div class="content_div div2">
					<h2>Complete Solution</h2>
					<p class="p1">A tool anything and everything you can think</p>
					<!-- 创建图片的div -->
					<div class="imgDiv">
						<img src="img/pic/pic2.jpg" alt="小女孩" />
					</div>

					<p class="p2">
						Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
					</p>

					<a class="lm" href="#">Learn More</a>
				</div>
				<div class="content_div">
					<h2>Uber Culture</h2>
					<p class="p1">Fresh. Modern and ready for future</p>
					<!-- 创建图片的div -->
					<div class="imgDiv">
						<img src="img/pic/pic3.jpg" alt="大绿球" />
					</div>

					<p class="p2">
						Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
					</p>

					<a class="lm" href="#">Learn More</a>
				</div>
		
				<!--内容部分结束-->
				
				<!--联系部分-->
				
				
			</div>
			<div class="con w"></div>
			
			
			
			
			
		</div>

		<!--由于IE6，png透明会有影响 引入js处理图片-->
		<!--[if IE 6]> 
				<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js" ></script>
				<script type="text/javascript">DD_belatedPNG.fix("div,img,a");</script>
		<![endif]-->

	</body>

</html>